<template>
  <view class="rich-text-compare">
    <!-- 导航栏 -->
    <view class="navbar">
      <view class="nav-left" @tap="goBack">
        <text class="nav-back">‹</text>
      </view>
      <view class="nav-center">
        <text class="nav-title">Rich-Text对比测试 - {{ currentPlatform }}</text>
      </view>
      <view class="nav-right"></view>
    </view>

    <!-- 平台信息 -->
    <view class="platform-info">
      <text class="platform-text">当前平台: {{ currentPlatform }}</text>
      <text class="debug-text">{{ debugInfo }}</text>
    </view>

    <!-- 内容区域 -->
    <scroll-view class="content" scroll-y="true">
      <!-- 测试1: HTML字符串格式 -->
      <view class="test-section">
        <view class="section-title">
          <text>测试1: HTML字符串格式</text>
        </view>
        <view class="test-content">
          <rich-text :nodes="htmlString" class="rich-text-renderer"></rich-text>
        </view>
        <view class="debug-section">
          <text class="debug-title">HTML内容:</text>
          <text class="debug-content">{{ htmlString }}</text>
        </view>
      </view>

      <!-- 测试2: Nodes数组格式 -->
      <view class="test-section">
        <view class="section-title">
          <text>测试2: Nodes数组格式</text>
        </view>
        <view class="test-content">
          <rich-text :nodes="nodesArray" class="rich-text-renderer"></rich-text>
        </view>
        <view class="debug-section">
          <text class="debug-title">Nodes数组:</text>
          <text class="debug-content">{{ JSON.stringify(nodesArray, null, 2) }}</text>
        </view>
      </view>

      <!-- 测试3: 复杂HTML -->
      <view class="test-section">
        <view class="section-title">
          <text>测试3: 复杂HTML内容</text>
        </view>
        <view class="test-content">
          <rich-text :nodes="complexHtml" class="rich-text-renderer"></rich-text>
        </view>
        <view class="debug-section">
          <text class="debug-title">复杂HTML:</text>
          <text class="debug-content">{{ complexHtml.substring(0, 200) }}...</text>
        </view>
      </view>

      <!-- 测试4: 代码块样式 -->
      <view class="test-section">
        <view class="section-title">
          <text>测试4: 代码块样式</text>
        </view>
        <view class="test-content">
          <rich-text :nodes="codeBlockHtml" class="rich-text-renderer"></rich-text>
        </view>
        <view class="debug-section">
          <text class="debug-title">代码块HTML:</text>
          <text class="debug-content">{{ codeBlockHtml.substring(0, 200) }}...</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 平台信息
      currentPlatform: '',
      debugInfo: '',
      
      // 测试1: 简单HTML字符串
      htmlString: '<p><strong>粗体文本</strong> 和 <em>斜体文本</em></p><p>普通段落文本</p>',
      
      // 测试2: Nodes数组格式
      nodesArray: [
        {
          name: 'p',
          children: [
            {
              name: 'strong',
              children: [{ type: 'text', text: '粗体文本' }]
            },
            { type: 'text', text: ' 和 ' },
            {
              name: 'em',
              children: [{ type: 'text', text: '斜体文本' }]
            }
          ]
        },
        {
          name: 'p',
          children: [{ type: 'text', text: '普通段落文本' }]
        }
      ],
      
      // 测试3: 复杂HTML
      complexHtml: `
        <h1>标题1</h1>
        <h2>标题2</h2>
        <p><strong>粗体</strong> <em>斜体</em> <u>下划线</u></p>
        <ul>
          <li>列表项1</li>
          <li>列表项2</li>
        </ul>
        <p style="color: red;">红色文本</p>
        <p style="background-color: yellow;">黄色背景</p>
      `,
      
      // 测试4: 代码块
      codeBlockHtml: `
        <div style="background-color: #f8f9fa; color: #495057; border: 1px solid #e9ecef; padding: 16px; margin: 16px 0; font-family: monospace; font-size: 14px; line-height: 1.5;">
          function hello() {\n    console.log('Hello World');\n}
        </div>
      `
    }
  },

  /**
   * 页面加载时的初始化方法
   */
  onLoad() {
    this.detectPlatform()
    this.generateDebugInfo()
    
    // console.log('=== Rich-Text对比测试页面加载 ===')
// console.log('当前平台:', this.currentPlatform)
// console.log('HTML字符串:', this.htmlString)
// console.log('Nodes数组:', this.nodesArray)
// console.log('=== 页面加载完成 ===')
  },

  methods: {
    /**
     * 检测当前运行平台
     */
    detectPlatform() {
      // #ifdef H5
      this.currentPlatform = 'H5'
      // #endif
      
      // #ifdef MP-WEIXIN
      this.currentPlatform = '微信小程序'
      // #endif
      
      // #ifdef APP-PLUS
      this.currentPlatform = 'App'
      // #endif
      
      if (!this.currentPlatform) {
        this.currentPlatform = '未知平台'
      }
    },
    
    /**
     * 生成调试信息
     */
    generateDebugInfo() {
      let info = []
      info.push(`平台: ${this.currentPlatform}`)
      info.push(`时间: ${new Date().toLocaleString()}`)
      
      // #ifdef H5
      info.push('H5端 rich-text 特性:')
      info.push('- 支持HTML字符串和nodes数组')
      info.push('- HTML解析相对宽松')
      info.push('- CSS样式支持较好')
      info.push('- 可能存在兼容性问题')
      // #endif
      
      // #ifdef MP-WEIXIN
      info.push('微信小程序端 rich-text 特性:')
      info.push('- 推荐使用nodes数组格式')
      info.push('- HTML字符串解析严格')
      info.push('- 某些CSS属性不支持')
      info.push('- 性能和稳定性较好')
      // #endif
      
      this.debugInfo = info.join('\n')
    },
    
    /**
     * 返回上一页
     */
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    }
  }
}
</script>

<style scoped>
/* 页面容器 */
.rich-text-compare {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

/* 导航栏样式 */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 30rpx;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-left, .nav-right {
  width: 80rpx;
  display: flex;
  align-items: center;
}

.nav-back {
  font-size: 40rpx;
  color: #1e3c72;
  font-weight: bold;
}

.nav-center {
  flex: 1;
  display: flex;
  justify-content: center;
}

.nav-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}

/* 平台信息样式 */
.platform-info {
  padding: 20rpx 30rpx;
  background-color: #e3f2fd;
  border-bottom: 1px solid #bbdefb;
  margin-bottom: 20rpx;
}

.platform-text {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: #1565c0;
  margin-bottom: 10rpx;
}

.debug-text {
  display: block;
  font-size: 24rpx;
  color: #424242;
  line-height: 1.5;
  white-space: pre-wrap;
  font-family: monospace;
}

/* 内容区域 */
.content {
  flex: 1;
  padding: 20rpx;
}

/* 测试部分样式 */
.test-section {
  background-color: #ffffff;
  border-radius: 16rpx;
  margin-bottom: 30rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.section-title {
  padding: 30rpx;
  background-color: #1e3c72;
  color: #ffffff;
}

.section-title text {
  font-size: 32rpx;
  font-weight: bold;
}

.test-content {
  padding: 30rpx;
  min-height: 100rpx;
  border-bottom: 1px solid #f0f0f0;
}

.rich-text-renderer {
  width: 100%;
  line-height: 1.6;
}

.debug-section {
  padding: 20rpx 30rpx;
  background-color: #f8f9fa;
}

.debug-title {
  display: block;
  font-size: 24rpx;
  font-weight: bold;
  color: #666666;
  margin-bottom: 10rpx;
}

.debug-content {
  display: block;
  font-size: 22rpx;
  color: #888888;
  line-height: 1.4;
  white-space: pre-wrap;
  font-family: monospace;
  word-break: break-all;
}
</style>